<template>
  <div class="menu">
    <div class="menu-title">页面导航</div>
    <div
        class="menu-item"
      v-for="(item, index) in props.options"
      :key="index"
      @click="toView(item.ref)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: "Menu",
  inheritAttrs: false,
})

const props = defineProps({
  options: {
    type: Array,
    default: () => []
  }
})

function toView(ref) {
  ref?.scrollIntoView({ behavior: "smooth" })
}
</script>

<style scoped>
.menu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.menu::-webkit-scrollbar {
  display: none;
}
.menu .menu-title {
  font-weight: bold;
  line-height: 2;
}
.menu .menu-item {
  line-height: 2;
  cursor: pointer;
}
</style>